<template>
  <div class="appoInfo-container" @click.stop="()=>{}">
    <Dialogdrawerdefect
      :ddtvisible.sync="appoInfoVisible"
      :modal="false"
    >
      <div class="appoInfo-wrap">
        <div class="aiw-grid">
          <div class="aig-title">
            <div class="tit">参数预约</div>
            <div class="navs">
              <div class="btn" v-show="appoInfo.appointmentStatus==='正常预约'" @click="appoDetail">预约详情 <i class="el-icon-arrow-right"></i></div>
            </div>
          </div>
          <div class="aiw-main">
            <el-table
              :data="tableDataTime"
              border
              size="mini"
              :header-cell-style="{backgroundColor: '#EEF5FE'}"
              style="width: 100%;">
              <el-table-column prop="appointmentDate" label="日期" align="center"></el-table-column>
              <el-table-column prop="checkClass" label="班次" align="center"></el-table-column>
              <el-table-column prop="beginTime" label="开始时间" align="center"></el-table-column>
              <el-table-column prop="endTime" label="结束时间" align="center"></el-table-column>
            </el-table>
            <el-table
              :data="tableDataInfo"
              border
              size="mini"
              :header-cell-style="{backgroundColor: '#EEF5FE'}"
              style="width: 100%;margin-top: 15px;">
              <el-table-column prop="initialNum" label="初始号码" align="center"></el-table-column>
              <el-table-column prop="checkNum" label="号源数" align="center"></el-table-column>
              <el-table-column prop="reserveNum" label="预留数" align="center"></el-table-column>
              <el-table-column prop="appointmentStatus" label="预约状态" align="center">
                <template slot-scope="scope">
                  <span :class="appoStatusClassFlr(scope.row.appointmentStatus)">{{scope.row.appointmentStatus}}</span>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>

        <div class="aiw-grid" v-show="tableDataFilter.length>0">
          <div class="aig-title">
            <div class="tit">过滤详情</div>
          </div>
          <div class="aiw-main">
            <el-table
              :data="tableDataFilter"
              border
              size="mini"
              :header-cell-style="{backgroundColor: '#F4F4F5'}"
              style="width: 100%">
              <el-table-column prop="parametersName" label="参数" align="center"></el-table-column>
              <el-table-column prop="parametersValues" label="参数值" align="center"></el-table-column>
              <!-- <el-table-column prop="parametersType" label="参数类型" align="center"></el-table-column> -->
            </el-table>
          </div>
        </div>

        <div class="aiw-grid" v-if="channel.length>0">
          <div class="aig-title">
            <div class="tit">预约渠道</div>
          </div>
          <div class="aiw-main">
            <div class="channel">
              <div class="channel-item" v-for="(item,index) in channel" :key="index">{{item}}</div>
            </div>
          </div>
        </div>
        <div class="aiw-grid">
          <div class="aig-title">
            <div class="tit">检查部位</div>
          </div>
          <div class="aiw-main tree-main">
            <div class="tree-box">
              <el-tree
                ref="tree"
                :data="checkTypeData"
                node-key="id"
                :props="defaultProps"
                :filter-node-method="filterNode">
              </el-tree>
            </div>
          </div>
        </div>

        <div class="aiw-footer">
          <el-button size="small" @click="close">返回</el-button>
        </div>
      </div>
    </Dialogdrawerdefect>
    <appoInfoDetail ref="appoInfoDetail"></appoInfoDetail>
  </div>
</template>

<script>
import { getBigPartGettreeRoom } from '@/api/room'
import appoInfoDetail from './appoInfoDetail'
import { dateFormatter } from '@/utils/validate'
import Dialogdrawerdefect from '@/components/dialogbox/dialogDrawerDefect'
export default {
  props: {
    hospitalCode: {
      type: String,
      default: ''
    },
    dep: {
      type: String,
      default: ''
    }
  },
  components: {
    Dialogdrawerdefect,
    appoInfoDetail
  },
  data() {
    return {
      parametersValuesSplit: this.$store.state.user.parametersValuesSplit,
      treeloading: false,
      appoInfoVisible: false,
      appoInfo: {

      },
      tableDataTime: [],
      tableDataInfo: [],
      tableDataFilter: [],
      channel: [],

      checkTypeData: [],
      checkedPartNodes: [],
      defaultProps: {
        children: 'childrens',
        label: 'text'
      }

    }
  },
  watch: {
    hospitalCode(val) {
      if (this.dep && val && this.appoInfoVisible) {
        this.checkTypeData = []
        this.getBigPartGettreeList()
      }
    },
    dep(val) {
      if (this.hospitalCode && val && this.appoInfoVisible) {
        this.checkTypeData = []
        this.getBigPartGettreeList()
      }
    }
  },
  methods: {
    init(appoInfo) {
      this.appoInfo = JSON.parse(JSON.stringify(appoInfo))
      this.reset()
      this.appoInfoVisible = true
      this.$nextTick(async () => {
        await this.getBigPartGettreeList()
        this.$refs.tree.filter('')
        this.setInfo()
      })
    },
    reset() {
      this.tableDataTime = []
      this.tableDataInfo = []
      this.tableDataFilter = []
      this.channel = []
      this.checkedPartNodes = []
    },
    setInfo() {
      console.log('++++++++++++++++setInfo+++++++++++++++++设置checkClass')
      this.tableDataTime = [
        {
          appointmentDate: dateFormatter(this.appoInfo.appointmentDate, false),
          checkClass: this.appoInfo.checkClass,
          beginTime: this.appoInfo.beginTime,
          endTime: this.appoInfo.endTime
        }
      ]
      this.tableDataInfo = [
        {
          initialNum: this.appoInfo.initialNum,
          checkNum: this.appoInfo.checkNum,
          reserveNum: this.appoInfo.reserveNum,
          appointmentStatus: this.appoInfo.appointmentStatus
        }
      ]
      this.calSetRule()
      // this.tableDataFilter = JSON.parse(JSON.stringify([...this.appoInfo.appointmentFilters]))
    },
    calSetRule() {
      const appoFlr = JSON.parse(JSON.stringify(this.appoInfo.appointmentFilters))
      for (let index = 0; index < appoFlr.length; index++) {
        let flrObj = appoFlr[index]
        if (flrObj.parametersType === this.$store.state.user.parametersTypeByPartKey2) {
          // 检测项目（大检查项目）
          this.checkedPartNodes = flrObj.parametersValues.split(this.parametersValuesSplit)// .map(item => {return {name: item}})
          this.checkedPartNodes.length && this.setCheckedPartIds()
          continue
        }
        if (flrObj.parametersType === 'WYYY' || flrObj.parametersType === 'LCYY' || flrObj.parametersType === 'VIP') {
          // 外院预约、临床预约、转诊预约
          this.channel.push(flrObj.parametersValues)
          continue
        }
        this.tableDataFilter.push(flrObj)
      }
    },
    // 检查部位的已选择数据
    setCheckedPartIds() {
      // 获取部位对应id
      let checkedId = []
      const findIdFun = (arr, text) => {
        const arrLen = arr.length
        for (let i = 0; i < arrLen; i++) {
          if (arr[i].childrens && arr[i].childrens.length > 0) {
            findIdFun(arr[i].childrens, text)
          } else {
            if (arr[i].text === text) {
              checkedId.push(arr[i].id)
            }
          }
        }
      }
      this.checkedPartNodes.forEach(part => {
        findIdFun(this.checkTypeData, part)
      })
      this.$refs.tree.filter(checkedId)
    },
    // 节点过滤
    filterNode(value, data) {
      if (!value) return false
      return value.indexOf(data.id) !== -1
    },
    // 获取检查项目，检查部位、检查项目
    getBigPartGettreeList() {
      return new Promise(async resolve => {
        if (this.checkTypeData.length !== 0) {
          resolve()
          return
        }
        const params = {
          HospitalCode: this.hospitalCode,
          Dep: this.dep
        }
        this.treeloading = true
        await getBigPartGettreeRoom(params).then(res => {
          this.treeloading = false
          if (res && res.code === 10000) {
            let partNodes = JSON.parse(JSON.stringify(res.content.childrens))
            partNodes.forEach(item => {
              item.childrens = []
            })
            this.checkTypeData = partNodes
          }
        })
        resolve()
      })
    },

    handleNodeClick(data) {
      console.log(data)
    },

    // 关闭弹框
    close() {
      this.appoInfoVisible = false
    },
    // 预约详情
    appoDetail() {
      const params = {
        HospitalCode: this.appoInfo.hospitalCode,
        AppointmentListDmbId: this.appoInfo.id
      }
      this.$refs.appoInfoDetail.init(params)
    },

    // 预约状态，样式class判断
    appoStatusClassFlr(val) {
      switch (val) {
        case '':
          return 'appo-grey'
        case '节假日':
          return 'appo-danger'
        case '暂停预约':
        case '设备故障':
          return 'appo-warn'
        case '正常预约':
          return 'appo-success'
        default:
          return 'appo-default'
      }
    }
  }
}
</script>

<style lang="scss" scoped>
$color-primary:#00C0EF;
$appoSuccessColor: #0bd677;
$appoDefaultColor: #1890FF;
$appoDangerColor: #E37470;
$appoWarnColor: #FF8618;
$appoGreyColor: #919398;
.appoInfo-wrap{
  display: flex;
  flex-direction: column;
  padding-bottom: 54px;
  .aiw-grid{
    flex:1;
    padding: 10px 15px 0;
  }
  .aiw-footer{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    text-align: right;
    padding: 105px 20px;
    border-top: solid 1px #DCDFE6;
    background-color: #fff;
  }
}
.tree-main{
  padding: 10px;
  background-color: #F3F6FB;
  .tree-box{
    max-height: 280px;
    overflow: auto;
    width: 100%;
  }
}
.aig-title{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  .tit{
    font-size: 14px;
    font-weight: bold;
    color: #333;
  }
  .navs{
    display: flex;
    align-items: center;
    color: $color-primary;
    cursor: pointer;
    user-select: none;
    // .btn{
    //   padding-right: 10px;
    //   margin-right: 10px;
    // }
  }
}
.channel{
  display: flex;
  flex-wrap: nowrap;
  border: solid 1px #e5e5e5;
  .channel-item{
    flex-grow: 1;
    text-align: center;
    line-height: 32px;
    border-right: solid 1px #e5e5e5;
    font-size: 14px;
    color: #666;
    &:last-child{
      border-right: none;
    }
  }
}
.appo-grey{
  color: $appoGreyColor;
}
.appo-danger{
  color: $appoDangerColor;
}
.appo-warn{
  color: $appoWarnColor;
}
.appo-success{
  color: $appoSuccessColor;
}
.appo-default{
  color: $appoDefaultColor;
}
</style>
